<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/harmonise.css" type="text/css" />
<link rel="stylesheet" href="../css/base-groups.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../css/ie.css" />
<![endif]-->
<title>Parallax Effect | Chapter 4 | CSS Mastery </title>
</head>
<style type="text/css">
<!--
/* pretty */

.content {	max-width: 61em; /* 1098px */
	margin: 0 auto;
	padding: 100px 20px 0 20px;}


/* parallax effect */

body {  background-image: url(img/bg-rear.gif);  background-repeat: repeat-x;  background-color: #d3ff99;  background-position: 20% 0;}.midground {  background-image: url(img/bg-mid.png);  background-repeat: repeat-x;  background-color: transparent;  background-position: 40% 0;}.foreground{  background-image: url(img/bg-front.png);  background-repeat: repeat-x;  background-color: transparent;  background-position: 150% 0;}
-->
</style>
</head>

<body>
  <div class="midground">    <div class="foreground">      <div class="content">        <h1>Your content will go here!</h1>      </div>    </div>  </div>
</body>
</html>
